<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        .chat-room {
            width: 500px;
            margin: auto;
        }

        #messages {
            height: 300px;
            overflow-y: auto;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            margin-bottom: 10px;
        }

        .message {
            margin-bottom: 10px;
            display: flex;
        }

        .nickname {
            font-size: 0.8em;
            opacity: 0.8;
            margin-right: 5px;
        }

        .message.self {
            justify-content: flex-end;
            text-align: right;
        }

        .message.self .message-text {
            background-color: #dcf8c6;
            color: #333;
        }

        .message-text {
            background-color: #eee;
            color: #333;
            padding: 8px 12px;
            border-radius: 20px;
            max-width: 60%;
            word-wrap: break-word;
        }

        .input-group {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="chat-room">
        <a href="wegame" target="_blank">多人小游戏</a>
        <div class="card">
            <div class="card-header">
                Chat Room
            </div>
            <div class="card-body">
                <ul id="messages" class="list-group"></ul>
                <div class="input-group mb-3">
                    <input id="nickname" type="text" class="form-control" placeholder="Enter nickname" autocomplete="off">
                </div>
                <div class="input-group">
                    <input id="m" type="text" class="form-control" placeholder="Type your message..." autocomplete="off">
                    <button id="send" class="btn btn-primary" type="button">Send</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Socket.IO client -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);
        var $messages = $('#messages');
        var $messageInput = $('#m');
        var $nicknameInput = $('#nickname');

        socket.on('message', function (msg) {
            var $message = $('<div class="message">')
                .append($('<span class="nickname">' + msg.nickname + '</span>'))
                .append($('<<div class="message-text">').text(msg.text));
            if (msg.nickname === $nicknameInput.val()) {
                $message.addClass('self');
            }
            $messages.append($message);
            $messages.scrollTop($messages[0].scrollHeight);
        });

        $(function () {
            $('#send').click(function () {
                sendMessage();
            });

            $messageInput.keypress(function (event) {
                if (event.which === 13) { // Enter key
                    sendMessage();
                }
            });

            function sendMessage() {
                var message = $messageInput.val().trim();
                var nickname = $nicknameInput.val().trim();
                if (nickname && message) {
                    socket.emit('message', { nickname: nickname, text: message });
                    $messageInput.val('');
                }
            }
        });
    </script>
</body>

</html>